<template>
	<view class="page-root">
		<nav-bar title="消息">
			<view slot="right" style="margin-right: 20upx;" @click="onNavRightClick">
				<image class="nav-right-icon" :src="navRightUrl"></image>
			</view>
		</nav-bar>

		<view class="top-tab">
			<view class="navtab" :class="{navtabActive:(curTab === 'warning')}" @click="changeTab('warning')">警报</view>
			<view class="navtab" :class="{navtabActive:(curTab === 'notice')}" @click="changeTab('notice')">通知</view>
		</view>


		<scroll-view scroll-y="true" class="scroll-view" v-if="curTab == 'warning'">
			<view class="notice-base" hover-class="uni-list-cell-hover" v-for="(item,index) in curseList" :key="index" @tap="onInfoClick(item)">

				<view  class="notice-item">
					<view class="item-one">
						<view class="item-one-icon"></view>
						<view class="item-one-left">{{item.Title}}</view>
						<view class="item-one-right">{{item.CreateTime.split(' ')[1]}}</view>
					</view>
					<view class="item-two">
						<view class="item-two-left">{{item.MessageText}}</view>
						<view class="item-dot"></view>
					</view>
				</view>
			</view>			
		</scroll-view>

		<scroll-view scroll-y="true" class="scroll-view" v-if="curTab == 'notice'">
			<view class="notice-base" hover-class="uni-list-cell-hover" v-for="(item,index) in noticeList" :key="index" @tap="onInfoClick(item)">

				<view class="notice-b-base">
					<view>
						<view class="item-one">
							<view class="item-one-icon"></view>
							<view class="item-one-left">{{item.title}}</view>
							<view class="item-one-right">{{item.title}} - 2</view>
						</view>
						<view class="item-two">
							<view class="item-two-left">{{item.title}}</view>
							<view class="item-dot"></view>
						</view>
					</view>
					<view class="item-dot"></view>
					<image class="arrow-right" :src="rightUrl"></image>
				</view>
			</view>
		</scroll-view>		

		<view class="shade" v-show="showPopupShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showPop}">
				<view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getConcernsMsgByUserID,
		getNoticeByUserID
	} from "@/services/message.js";
	import CONSTS from '@/common/biz/consts.js'
	
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			...mapState(['userInfo'])
		},
		
		data() {
			return {
				havedata: true,
				emptyImg: '/static/' + 'noAddCourse.svg',
				rightUrl: '/static/' + 'right-arrow-gray.png',
				navRightUrl: '/static/' + 'icon_more.png',
				curTab: 'warning',
				curseList: [],
				noticeList: [],
				/**
				 * 显示/隐藏遮罩
				 */
				showPopupShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗定位样式 */
				popStyle: "",
				/* 弹窗按钮列表 */
				popButton: ["全部标记为已读", "查看历史"],
				/* 窗口尺寸 */
				winSize: {},


				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				
				searchNoticePage: 0,
				searchWarnPage: 0,
			};
		},
		
		onLoad: function() {
			console.log(this.userInfo)
			uni.getSystemInfo({
				success: (res) => {
					this.winSize = {
						"witdh": res.windowWidth,
						"height": res.windowHeight
					}
				}
			})
			
			this.getNoticeData(this.searchNoticePage + 1);
			this.getWarnData(this.searchWarnPage + 1);
		},

		onReachBottom() {
			this.status = 'more';
			if(this.curTab == 'notice')
				this.getNoticeData(this.searchNoticePage + 1);
			else if(this.curTab == 'warning')
				this.getWarnData(this.searchWarnPage + 1);
		},

		mounted() {

		},
		methods: {
			/* 隐藏弹窗 */
			hidePop() {
				var _self = this;
				this.showPop = false;
				this.showPopupShade = false;
			},

			/* 选择菜单 */
			pickerMenu(e) {
				let index = Number(e.currentTarget.dataset.index);
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/message/histroyMessage'
					})
				}

				this.hidePop();
			},

			onNavRightClick(e) {
				// debugger
				var _self = this;
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				style = `top:${touches.clientY}px;`;

				style += `right:${this.winSize.witdh-touches.clientX}px`;


				this.popStyle = style;
				this.showPopupShade = true;

				this.$nextTick(() => {
					setTimeout(() => {
						_self.showPop = true;
					}, 10);
				});
			},

			changeTab(curTab) {
				this.curTab = curTab;
				// this.getDirList();
			},


			onInfoClick(itemData) {
				console.log(itemData)
				uni.navigateTo({
					url: '/pages/webPage/webPage?url=http://www.baidu.com&title=' + itemData.title
				})
			},

			// getDirList(inPage) {
			// 	// getConcernsMsgById
			// 	console.log(this.userInfo)

			// 	getConcernsMsgById({
			// 		IsRead: 0,
			// 		UserId: this.userInfo.userEntity.userId,
			// 		linit: CONSTS.PAGE_DEFAULT_LIMIT,
			// 		page: inPage,
			// 	}).then((res) => {
			// 		if (inPage == 0)
			// 			this.curseList = [];
			// 		let tempData = res.data;
			// 		this.curseList = this.curseList.concat(tempData);
			// 		this.searchPage = this.searchPage + 1;
			// 	})

			// 	// this.curseList = test_msglist.data;
			// },
			
			getNoticeData(inPage){
				getNoticeByUserID({
					UserId: JSON.parse(localStorage.user).userId,
					page: inPage,
					linit: CONSTS.PAGE_DEFAULT_LIMIT,
					IsRead: 1  // 1=所有  2=未读 3=已读
				}).then((res) => {
					debugger
					if (inPage == 0)
						this.noticeList = [];
					let tempData = res.data;
					this.noticeList = this.noticeList.concat(tempData);
					this.searchNoticePage = this.searchNoticePage + 1;
				} )
			},
			
			getWarnData(inPage){
				getConcernsMsgByUserID({
					UserId: JSON.parse(localStorage.user).userId,
					page: inPage,
					linit: CONSTS.PAGE_DEFAULT_LIMIT,
					IsRead: 1  // 1=所有  2=未读 3=已读
				}).then((res) => {
					debugger
					if (inPage == 0)
						this.curseList = [];
					let tempData = res.data;
					this.curseList = this.curseList.concat(tempData);
					this.searchWarnPage = this.searchWarnPage+ 1;
				} )
			}
		},
	};
</script>

<style scoped lang='scss'>
	.page-root {
		height: 100vh;
		/* background: #F8F8F8; */
	}

	.scroll-view {
/* 		background-color: #4CD964;
 */		flex: 1;
/* 		display: flex;
		flex-direction: column; */
		/* height: 80vh; */
		/* height: calc(100% - 190upx); */
	}

	.nav-right-icon {
		width: 48upx;
		height: 48upx;
	}

	.top-tab {
		/* position: fixed; */
		width: 100%;
		height: 70upx;
		background: #fff;
		padding-top: 20upx;

		box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);

	}

	.navtab {
		float: left;
		margin-top: 0upx;
		margin-left: 100upx;
		width: 30%;
		height: 68upx;
		text-align: center;
		color: rgba(0, 0, 0, 0.45);
	}


	.navtabActive {
		border-bottom: 4upx solid #327FFC;
		color: #327FFC;
	}

	.notice-base {
		flex-direction: row;
	}

	.notice-item {
		position: relative;
		display: flex;
		flex-direction: column;

		margin: 20upx 20upx 0upx 20upx;
		padding: 18upx 22upx 18upx 22upx;

		background: #FFFFFF;
		box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 4px;


	}

	.item-one {
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.item-one-icon {
		width: 6upx;
		height: 24upx;
		background-color: #007AFF;
	}

	.item-one-left {
		width: 60vw;
		font-size: 32upx;
		margin-left: 24upx;
		color: rgba(0, 0, 0, 1);
	}

	.item-one-right {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.25);
	}

	.item-dot {
		width: 10px;
		height: 10px;
		background-color: #FF0000;
		margin-right: 10px;
		border-radius: 50%;
	}

	.item-two {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24upx;
		justify-content: space-between;
	}

	.item-two-left {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 16px;
	}

	.notice-b-base {
		position: relative;
		display: flex;
		flex-direction: row;
		margin: 20upx 20upx 0upx 20upx;
		padding: 18upx 22upx 18upx 22upx;
		background: #FFFFFF;
		box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 4px;

		align-items: center;
	}

	.arrow-right {
		width: 32upx;
		height: 32upx;
		right: 4upx;
		position: absolute;
	}


	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;
		background-color: rgba(0, 255, 0, 0.5);

		.pop {
			position: fixed;
			z-index: 1001;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: #f3f3f3;
				}
			}
		}
	}
</style>
